<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="search">
  <a href="studentAdd.html">添加学生信息</a>
  多条件查询：姓名:<input name="stuname">/生日区间:<input name="startBir">---<input name="endBir">/班级:<input name="cname"><input type="button" value="搜索" id="btn">
</form>
  <hr>
      <table border="1" cellpadding="0" width="100%">
        <tr>
          <td>编号</td>
          <td>姓名</td>
          <td>生日</td>
          <td>性别</td>
          <td>年龄</td>
          <td>编号</td>
          <td>班级名称</td>
          <td>操作</td>
        </tr>
        <tbody id="stuListBody">

        </tbody>
      </table>
<script>
  //获取学生列表数据
   function getStudentList(currentPage){
    $.ajax({
      url:'/student/list',
      data:'currentPage1='+currentPage,
      dataType:'json',
      success:function (data){
        console.log(data)
        $("#stuListBody").empty();//表示把tbody标签中的原内容清空
        //追加新内容
      $.each(data.obj.list,function (index,stu){
        let cname='';
        let cid='';
        if(stu.classes!=null){
          cid=stu.classes.cid;
          cname=stu.classes.cname;
        }
        $("#stuListBody").append('<tr>' +
                '<td>'+stu.stuId+'</td>' +
                '<td>'+stu.stuName+'</td>/n'+
                '<td>'+stu.stuBir+'</td>/n'+
                '<td>'+stu.stuSex+'</td>/n'+
                '<td>'+stu.stuAge+'</td>/n'+
                '<td>'+cid+'</td>/n'+
                '<td>'+cname+'</td>/n'+
                '<td><a>修改</a>&nbsp;&nbsp;<a>删除</a></td>/n'+
                '</tr>')
      })
        //遍历navigatepageNums
        var str='';
        $.each(data.obj.navigatepageNums,function (index,num){
          if(data.obj.pageNum==num){
            str+='<a href="javascript:getStudentList('+num+')">'+num+'</a>&nbsp;&nbsp;';
          }else{
            str+='<a href="javascript:getStudentList('+num+')">'+num+'</a>&nbsp;&nbsp;';
          }
        })
        //追加分页
        $("#stuListBody").append('<a href="javascript:getStudentList('+data.obj.prePage+')">上一页</a>&nbsp;&nbsp;[&nbsp;'+str+']&nbsp;<a href="javascript:getStudentList('+data.obj.nextPage+')">下一页</a>')
      }
    })
  }

  //搜索按钮点击事件
  $("#btn").click(function (){
    $.ajax({
      url:'/student/list',
      data:$("#search").serialize(),
      dataType: 'json',
      success:function (data){
        console.log(data)
        //追加新内容
        $.each(data.obj.list,function (index,stu){
          let cname='';
          let cid='';
          if(stu.classes!=null){
            cid=stu.classes.cid;
            cname=stu.classes.cname;
          }
          $("#stuListBody").append('<tr>' +
                  '<td>'+stu.stuId+'</td>' +
                  '<td>'+stu.stuName+'</td>/n'+
                  '<td>'+stu.stuBir+'</td>/n'+
                  '<td>'+stu.stuSex+'</td>/n'+
                  '<td>'+stu.stuAge+'</td>/n'+
                  '<td>'+cid+'</td>/n'+
                  '<td>'+cname+'</td>/n'+
                  '</tr>')
        })

      }
    })
  })
  $(function (){
    //默认显示第一页
    //1为实参
    getStudentList(1);
  })
</script>
</body>
</html>